﻿@{
    ViewBag.Title = "用户登录";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Content/layer-v3.1.1/layer/layer.js"></script>
<script src="~/Scripts/verificationNumbers.js"></script>
@section Scripts{
    <script type="text/javascript">

        //入口函数
        $(function () {

            createCode();   //生成图形验证码

            //登录按钮的点击事件
            $("#btnSubmit").on("click", function () {
                var layerIndex = -1; //用来记录加载弹层index
                //表单提交
                $('#LoginForm').form('submit', {
                    url: '@Url.Content("~/Home/UserLoginByInfo")',
                    onSubmit: function () {
                        //return $(this).form('validate');
                        //表单字段验证
                        if ($(this).form('validate')) {
                            //add2019-09-09 plq 表单提交前，且表单字段验证无误后，显示加载中提示弹层，当提交成功后关闭
                            //验证图形验证码
                            var inputCode = $("#txt_VerifyCode").textbox("getValue").trim().toUpperCase(); //用户的验证码
                            //console.log(inputCode);
                            if (inputCode == "") {
                                layer.alert("请输入验证码");
                                return false;
                            }
                            var codeToUp = code.toUpperCase();//生成的图形码
                            if (inputCode != codeToUp) { //验证码输入不匹配
                                layer.alert("请输入正确的验证码");
                                $('#txt_VerifyCode').textbox('clear'); //清空
                                createCode(); //重新生成图形码
                                return false;
                            }
                            layerIndex = layer.msg('加载中', { icon: 16, shade: 0.01 }); //显示加载层
                            return true;
                        } else {
                            return false;
                        }
                    },
                    success: function (data) {
                        console.log(data);
                        layer.close(layerIndex);//关闭加载层
                        var data = JSON.parse(data);//转为JSON对象
                        //add2021-07-27 plq 密码强度检测，强度低的进行提示 start
                        //console.log(data);
                        if (data.Result == "OK") { //登录成功
                            var pwd = $("#txt_PassWord").passwordbox("getValue");
                            //var pwd = $("#txt_PassWord").val();
                            //console.log(pwd);

                            //var reg = /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,}$/; //密码格式验证正则表达式--不能过滤中文
                            var reg = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[\W_]).{8,}$/; //密码格式验证正则表达式--密码应不少于8位，且包含数字、字母和特殊符号
                            if (!reg.test(pwd)) { //密码强度验证不通过
                                $.messager.confirm('提示', '您的密码强度较低，是否进行修改?', function (r) {
                                    if (r) {
                                        OpenPwdEditDialog(); //打开修改密码弹出框
                                        return false;//后续代码不执行
                                    }
                                    else {
                                        $.handleJsonResult(data, function () {
                                            window.location = data.RedirectURL; //跳转到目标页
                                        });
                                    }
                                });
                            }
                            else {
                                $.handleJsonResult(data, function () {
                                    window.location = data.RedirectURL; //跳转到目标页
                                });
                            }
                        }//密码强度检测，强度低的进行提示 end
                        else { //登录失败
                            $('#txt_VerifyCode').textbox('clear'); //清空
                            createCode(); //重新生成图形码
                            $.handleJsonResult(data, function () {
                                window.location = data.RedirectURL; //跳转到目标页
                            });
                        }




                    }
                });
            });

            ////2019-11-01 plq 按下键盘上enter键触发登录按钮的点击事件
            //$(document).keyup(function (event) {
            //    if (event.keyCode == 13) {
            //        $("#btnSubmit").trigger("click");
            //    }
            //});

            //add2021-04-12 plq 忘记密码
            @*$("#btnRegister").on("click", function () {
                window.location.href = '@Url.Content("~/Home/SMSVerify")'; //跳到注册页

            });*@

            //修改密码 add2021-07-27 plq start
            //修改密码后保存
            $("#btnSavePwd").click(function () {
                var LoginName = $("#IdCard").val(); //获取当前登录用户名
                //var OldPwd = $("#OldPwd").passwordbox("getValue"); //获取原密码
                var NewPwd = $("#NewPwd").passwordbox("getValue"); //获取新密码
                var SurePwd = $("#SurePwd").passwordbox("getValue"); //获取确认密码
                //var NewPwd = $("#NewPwd").val();//获取新密码
                //var SurePwd = $("#SurePwd").val();//获取确认密码
                //console.log(LoginName);
                //console.log(OldPwd);
                //console.log(NewPwd);
                //console.log(SurePwd);
                if (NewPwd == "" || SurePwd == "") {
                    $.messager.alert('提示', '修改密码时必填项不能为空', function () {
                    });
                    return false;
                }
                //if (OldPwd == NewPwd) {
                //    $.messager.alert('提示', '新密码不能与原密码相同', function () {
                //    });
                //    return false;
                //}
                if (SurePwd != NewPwd) {
                    $.messager.alert('提示', '两次密码输入不一致，请检查', function () {
                    });
                    return false;
                }
                var pattern = /^[^\u4e00-\u9fa5]{0,}$/; //正则，不允许有中文
                if (!pattern.test(NewPwd)) {
                    $.messager.alert('提示', '密码中不允许出现中文', function () {
                    });
                    return false;
                }
                //var reg = /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,}$/; //密码格式验证正则表达式--不能过滤中文
                var reg = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[\W_]).{8,}$/; //密码格式验证正则表达式
                if (!reg.test(NewPwd)) {
                    $.messager.alert('提示', '密码应不少于8位，且包含数字、字母和特殊符号', function () {
                    });
                    return false;
                }

                var urlStr = '@Url.Content("~/Home/UpdatePwdByLoginName")';
                if (NewPwd == SurePwd) {
                    $.post(urlStr, { NewPwd: NewPwd, LoginName: LoginName }, function (data) {
                        if (data == "OK") {
                            $.messager.alert('提示', '修改成功', function () {
                            });
                            Close(); //关闭修改密码弹层
                            //add2019-12-02 plq 使用window.opener的时候要去判断父窗口的状态，否则若父窗口被关闭或者更新，就会出错
                            if (window.opener && !window.opener.closed) {
                                //add20191218plq IE下关闭源窗口时防止弹出“你查看的网页正在试图关闭标签页。是否关闭此标签页？”
                                window.opener.opener = null;
                                window.opener.open("", "_self");
                                window.opener.close(); //关闭源（父）窗口
                            }
                            window.location.href = '@Url.Content("~/Home/UserLoginPage")'; //返回登录页
                        } else if (data == "NO") {
                            $.messager.alert('提示', '修改失败', function () {
                            });
                            //Close();
                        } else {
                            //alert(data);
                            $.messager.alert('提示', data);
                            //Close();
                        }
                    })
                } else {
                    $.messager.alert('提示', '两次密码输入不一致');
                    $("#NewPwd").val(null);
                    $("#SurePwd").val(null);
                }
            });


            //打开修改密码弹出框
            function OpenPwdEditDialog() {
                $("#update").dialog('open');
                //清空密码输入框
                $("#IdCard").textbox("setValue", $.trim($('#txt_LoginName').val()));
                $("#NewPwd").val(null);
                $("#SurePwd").val(null);
            }
            //关闭修改密码弹出框
            function Close() {
                $("#update").dialog('close');
            }
            //修改密码 end

        });


    </script>
}

<div class="page_Main" style="width: 100%; height: 100vh; background-image: url('@Url.Content("~/Images/LoginIcon/bg.png")');">
    <!--用户登录框-->
    <div class="LoginBox">
        <div class="iconBox">
            <p class="icon120">
                <img src="~/Images/LoginIcon/icon_120.png" alt="120" />
            </p>
            <h4 class="name120">
                上海市医疗急救中心院前急救平台
            </h4>
        </div>
        <div class="loginFormBox">
            <!--输入表单背景框-->
            <div class="loginFormBgBox">
                <div class="SignFlow-tabs">
                    <div class="SignFlow-tab SignFlow-tab--active" id="tab_PswLogin">用户名密码登录</div>
                </div>
                <form method="post" id="LoginForm">
                    <!--用户名输入行-->
                    <div class="LoginNameBox clearfix">
                        <div class="inputIconBox icon_user">
                            <img src="~/Images/LoginIcon/user.png" alt="用户名" />
                        </div>
                        <div class="InputBox">
                            <input class="easyui-textbox" name="LoginName" id="txt_LoginName" data-options="required:true,prompt:'用户名'" style="width: 220px; height: 30px;" />
                        </div>
                    </div>
                    <!--密码输入行-->
                    <div class="PassWordBox clearfix">
                        <div class="inputIconBox icon_psw">
                            <img src="~/Images/LoginIcon/psw.png" alt="密码" />
                        </div>
                        <div class="InputBox">
                            <input class="easyui-passwordbox" name="PassWord" id="txt_PassWord" data-options="required:true,prompt:'密码'" style="width:220px;" />
                            @*<input type="password" name="PassWord" id="txt_PassWord" />*@
                        </div>
                    </div>
                    <!--图形验证码 add2021-04-12 plq -->
                    <div class="PassWordBox clearfix">
                        <div class="inputIconBox icon_psw">
                            <img src="~/Images/LoginIcon/verify.png" alt="验证码" />
                        </div>
                        <div class="InputBox">
                            <input class="easyui-textbox" name="VerifyCode" id="txt_VerifyCode" data-options="prompt:'验证码',validType:'length[0,4]'" style="width: 120px; height: 30px;" autocomplete="off" />
                            <canvas class="J_codeimg" id="myCanvas" onclick="createCode()" onselectstart="return false">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
                        </div>
                    </div>
                    <!--注册-->
                    <div class="BtnRegisterBox clearfix">
                        <div class="SignFlow-btnBox">
                            @*<input type="button" id="btnRegister" class="Button Button--plain" value="忘记密码？">*@
                        </div>
                    </div>
                    <!--登录按钮-->
                    <div class="btnSubmitBox">
                        <a href="javascript:void(0)" id="btnSubmit">登录</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!--修改密码对话框-->
<div id="update" class="easyui-dialog" title="修改密码" data-options="modal:true,collapsible:false,minimizable:false,maximizable:false,closed:true,closable:false,resizable:true,iconCls:'icon-save'" style="width:400px;height:300px;padding:10px">
    <div data-options="region:'center'" style="overflow: hidden">
        <form method="post">
            <table style="width:99%">
                <tr style="height:40px">
                    <td>&nbsp;&nbsp;当前用户名：</td>
                    <td>
                        <input type="text" id="IdCard" class="easyui-textbox" style="width:160px" data-options="required:true" readonly="readonly" />
                    </td>
                </tr>
                <tr style="height:40px">
                    <td>&nbsp;&nbsp;新密码：</td>
                    <td>
                        <input id="NewPwd" class="easyui-passwordbox" style="width:160px" data-options="required:true"
                               autocomplete="off" />
                        @*<input id="NewPwd" type="password" autocomplete="off" />*@
                    </td>
                </tr>
                <tr style="height:40px">
                    <td>&nbsp;&nbsp;确认密码：</td>
                    <td>
                        <input id="SurePwd" class="easyui-passwordbox" style="width:160px" data-options="required:true"
                               autocomplete="off" />
                        @*<input id="SurePwd" type="password" autocomplete="off" />*@
                    </td>
                </tr>
                <tr style="height:100px">
                    <td colspan="2" align="center">
                        <a href="javascript:void(0)" id="btnSavePwd" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">保存</a>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>

<style>
    * {
        margin: 0;
    }

    body {
        height: 100vh;
        overflow: hidden;
    }

    a {
        text-decoration: none;
    }

    .page_Main {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .LoginBox {
        position: absolute;
        left: 50%;
        top: 45%;
        transform: translate(-50%,-50%);
    }

    .icon120 {
        text-align: center;
    }

        .icon120 img {
            width: 114px;
            height: auto;
            vertical-align: middle;
        }

    .name120 {
        height: 42px;
        line-height: 42px;
        color: #fff;
        font-size: 28px;
    }

    .iconBox {
        margin-bottom: 20px;
    }

    .loginFormBox {
        position: relative;
        /*height: 340px;*/
        height: 460px;
    }

    .loginFormBgBox {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 450px;
        height: 100%;
        /*height: 340px;*/
        border-radius: 5px;
        /*background-color: #e1f0f6;*/
        background-color: rgba(225,240,246,.8);
    }

    #LoginForm {
        width: 100%;
        /*height: 100%;
        padding: 50px 50px 0;*/
        height: 320px;
        padding: 25px 50px 0;
        box-sizing: border-box;
    }

    .LoginNameBox, .PassWordBox {
        position: relative;
        width: 100%;
        height: 50px;
        border-radius: 8px;
        background-color: #fff;
    }

    .PassWordBox {
        margin-top: 30px;
    }

    .inputIconBox {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 60px;
        border-right: 1px solid #dfdfdf;
    }

    .InputBox {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 290px;
    }

    .inputIconBox, .InputBox {
        display: inline-block;
    }

    #txt_LoginName, #txt_PassWord {
        /*width: 70%;*/
        width: 215px;
        height: 25px;
        border-radius: 5px 5px 5px 5px;
        border: 1px solid #D4D4D4;
    }

    .btnSubmitBox {
        margin-top: 50px;
        /*margin-top: 72px;*/
    }

        .btnSubmitBox #btnSubmit {
            display: inline-block;
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 22px;
            color: #fff;
            font-weight: 500;
            border-radius: 8px;
            background-color: #459be6;
        }

            .btnSubmitBox #btnSubmit:hover {
                background-color: #317ef3;
            }
    /*伪元素清除浮动*/
    .clearfix {
        display: block;
        *zoom: 1;
    }

        .clearfix:after {
            clear: both;
            content: ".";
            display: block;
            height: 0;
            visibility: hidden;
        }

    /*add20200522 plq 添加多方式登录tab start*/
    .SignFlow-tabs {
        height: 60px;
        padding: 0 50px;
        text-align: left;
    }

    .SignFlow-tab {
        display: inline-block;
        color: #444;
        font-size: 16px;
        line-height: 60px;
        height: 60px;
        margin-right: 24px;
        cursor: pointer;
    }

    .SignFlow-tab--active {
        position: relative;
        color: #1a1a1a;
        font-weight: 600;
        font-synthesis: style;
    }

        .SignFlow-tab--active:after {
            display: block;
            position: absolute;
            bottom: 0;
            content: "";
            width: 100%;
            height: 3px;
            background-color: #0084ff;
        }
    /*add20200522 plq 添加多方式登录tab end*/
</style>
<style>
    .J_codeimg {
        display: inline-block;
        width: 100px;
        height: 28px;
        padding: 3px;
        z-index: 0;
        /*background: rgba(28, 122, 178,.3);*/
        background-color: rgba(10, 158, 234, .8);
        box-sizing: border-box;
        vertical-align: middle;
        cursor: pointer;
    }

    .BtnRegisterBox {
        position: relative;
        margin-top: 12px;
        height: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        background-color: transparent;
    }

    .Button {
        display: inline-block;
        padding: 0 16px;
        font-size: 14px;
        line-height: 32px;
        color: #2e82ff;
        text-align: center;
        cursor: pointer;
        background: none;
        border: 1px solid;
        border-radius: 3px;
    }

        .Button:focus {
            outline: none;
            -webkit-transition: -webkit-box-shadow .3s;
            transition: -webkit-box-shadow .3s;
            transition: box-shadow .3s;
            transition: box-shadow .3s,-webkit-box-shadow .3s;
        }

    .Button--plain {
        height: auto;
        padding: 0;
        line-height: inherit;
        background-color: transparent;
        border: none;
        border-radius: 0;
    }

        .Button--plain:hover {
            /*color: #76839b;*/
            opacity: .6;
        }

    .SignFlow-btnBox {
        position: absolute;
        top: 50%;
        left: 0;
        padding: 4px 0;
        color: #767676;
        font-size: 14px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
</style>
